import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'
import { Table } from 'antd'
import axios from 'axios'
import './home.scss'

// export default function Home() {

//   const [dataSource, setDataSource] = useState([])
//   const [index, setIndex] = useState(0)

//   const columns = [
//     {
//       title: '地区',
//       dataIndex: 'area',
//       key: 'area',
//     },
//     {
//       title: 'Java',
//       dataIndex: 'java',
//       key: 'java',
//     },
//     {
//       title: 'PHP',
//       dataIndex: 'php',
//       key: 'php',
//     },
//     {
//       title: 'Node',
//       dataIndex: 'node',
//       key: 'node',
//     },
//     {
//       title: 'JS',
//       dataIndex: 'js',
//       key: 'js',
//     },
//     {
//       title: 'Python',
//       dataIndex: 'python',
//       key: 'python',
//     },
//   ];

//   useEffect(()=>{
//     axios.get('/data.json').then((res)=>{

//       if (res.data.code === 0) {
//         console.log(res)
//         setDataSource(res.data.data)
//       }
//     })
//   }, [])

//   return <div className="home">
//     <h1>语言大数据报告</h1>
//     <div className="wrap">
//       <div className="nav">
//         <a className={ index === 0 ? "checked": "" } onClick={()=>{ setIndex(0) }}>语言动态</a>
//         <a className={ index === 1 ? "checked": "" } onClick={()=>{ setIndex(1) }}>语言地图</a>
//         <a className={ index === 2 ? "checked": "" } onClick={()=>{ setIndex(2) }}>语言热搜</a>
//         <a className={ index === 3 ? "checked": "" } onClick={()=>{ setIndex(3) }}>语言播报</a>
//       </div>
//       <p>数据纯属虚构</p>
//       <Table 
//       bordered
//       pagination={false}
//       dataSource={dataSource} 
//       columns={columns} />
//       <Link to="/" className="nav-link"> 回首页</Link>
//     </div>
//   </div>
// }


export default class Home extends React.Component {

  state = {
    dataSource: [],
    index: 0,
    columns: [
      {
        title: '地区',
        dataIndex: 'area',
        key: 'area',
      },
      {
        title: 'Java',
        dataIndex: 'java',
        key: 'java',
      },
      {
        title: 'PHP',
        dataIndex: 'php',
        key: 'php',
      },
      {
        title: 'Node',
        dataIndex: 'node',
        key: 'node',
      },
      {
        title: 'JS',
        dataIndex: 'js',
        key: 'js',
      },
      {
        title: 'Python',
        dataIndex: 'python',
        key: 'python',
      },
    ]
  }

  componentDidMount() {
    axios.get('/data.json').then((res) => {

      if (res.data.code === 0) {
        this.setState({
          dataSource: res.data.data
        });
      }
    })
  }

  setIndex = (e) => {
    this.setState({
      index: e
    });
  }

  render() {
    return <div className="home">
      <h1>语言大数据报告</h1>
      <div className="wrap">
        <div className="nav">
          <a className={this.state.index === 0 ? "checked" : ""} onClick={() => { this.setIndex(0) }}>语言动态</a>
          <a className={this.state.index === 1 ? "checked" : ""} onClick={() => { this.setIndex(1) }}>语言地图</a>
          <a className={this.state.index === 2 ? "checked" : ""} onClick={() => { this.setIndex(2) }}>语言热搜</a>
          <a className={this.state.index === 3 ? "checked" : ""} onClick={() => { this.setIndex(3) }}>语言播报</a>
        </div>
        <p>数据纯属虚构</p>
        <Table
          bordered
          pagination={false}
          dataSource={this.state.dataSource}
          columns={this.state.columns} />
        <Link to="/" className="nav-link"> 回首页</Link>
      </div>
    </div>
  }
}